<!DOCTYPE html>
<!--
  index.html version 1.3.2
  This file is part of OpenAero.

  OpenAero was originally designed by Ringo Massa and built upon ideas
  of Jose Luis Aresti, Michael Golan, Alan Cassidy and many others. 

  OpenAero is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  OpenAero is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with OpenAero.  If not, see <http://www.gnu.org/licenses/>.
-->

<html manifest="cache.manifest">
  <head>
    <meta charset="UTF-8">
    <!-- set viewport for mobile browsers -->
    <meta name="viewport" id="viewport" content="width=320, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />
    <title>OpenAero</title>
    <!-- stylesheets -->
    <link rel="stylesheet" type="text/css" href="OpenAero.css">
    <link rel="stylesheet" type="text/css" href="desktop.css" id="mobileDesktopCSS">
    <!-- favicons -->
    <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon16.png">
    <link rel="icon" type="image/png" sizes="24x24" href="favicons/favicon24.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon32.png">
    <link rel="icon" type="image/png" sizes="57x57" href="favicons/favicon57.png">
    <link rel="icon" type="image/png" sizes="72x72" href="favicons/favicon72.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon96.png">
    <link rel="icon" type="image/png" sizes="114x114" href="favicons/favicon114.png">
    <link rel="icon" type="image/png" sizes="128x128" href="favicons/favicon128.png">
    <link rel="icon" type="image/png" sizes="195x195" href="favicons/favicon195.png">
    <!-- configuration -->
    <script src="config.js" type="text/javascript"></script>
    <!-- logos -->
    <script src="logo.js" type="text/javascript"></script>
    <!-- figure definitions -->
    <script src="figures.js" type="text/javascript"></script>
    <!-- sequence rules -->
    <script src="rules/rules13.js" type="text/javascript"></script>
    <script src="rules/rules13-civa.js" type="text/javascript"></script>
    <script src="rules/rules13-baea.js" type="text/javascript"></script>
    <script src="rules/rules13-france.js" type="text/javascript"></script>
    <script src="rules/rules13-vink.js" type="text/javascript"></script>
    <script src="rules/rules13-glider-civa.js" type="text/javascript"></script>
    <!-- example sequences -->
    <script src="examples.js" type="text/javascript"></script>
    <!-- improve look of XML output -->
    <script src="vkbeautify.js" type="text/javascript"></script>
  </head>
  <body onLoad="doOnLoad();">
    <!-- overlay div for use with alertBox and loading -->
    <div id="alertBoxOverlay" style="display:none;">
      <!-- warn when javascript is disabled -->
      <noscript>
        You need a JavaScript-capable browser to use this software.
        <a href="http://www.google.com/support/bin/answer.py?answer=23852&hl=en">Click here for instructions</a>
        on how to enable JavaScript in your browser.
      </noscript>
    </div>
    <!-- alertBox -->
    <div id="alertBox" class="box noDisplay">
      <span class="boxTitle" id="alertTitle">
      </span>
      <div id="alertMessage">
      </div>
      <div class="textButton close" onClick="alertBox();">
        <script>document.write(userText.closeIt);</script>
      </div>
    </div>
    <!-- print dialog -->
    <div id="printDialog" class="box noDisplay">
      <span class="boxTitle">
        <script>document.write(userText.printDialog);</script>
      </span>
      <div>
        <script>document.write(userText.printExplain);</script>
      </div>
      <div>
        <input type="checkbox" id="printMiniFormA" checked="true">
        <script>document.write(userText.printMiniFormA);</script>
      </div>
      <div>
        <input type="checkbox" id="printString" checked="true">
        <script>document.write(userText.printString);</script>
      </div>
      <div>
        <input type="checkbox" id="numberInCircle">
        <script>document.write(userText.numberInCircle);</script>
      </div>
      <div>
        <input type="checkbox" id="iacForms">
        <script>document.write(userText.iacForms);</script>
      </div>
      <div>
        <input type="checkbox" id="inverseForms">
        <script>document.write(userText.inverseForms);</script>
      </div>
      <span class="textButton" onClick="printAllForms();">
        <script>document.write(userText.print);</script>
      </span>
      <span class="textButton" onClick="printDialog();">
        <script>document.write(userText.cancel);</script>
      </span>
    </div>
    <!-- check sequence -->
    <div id="checkSequence" class="box noDisplay">
      <span class="boxTitle">
        <script>document.write(userText.checkSequence);</script>
      </span>
      <div id="checkSequenceContent"></div>
      <span class="textButton" onClick="checkSequence();">
        <script>document.write(userText.ok);</script>
      </span>
      <span class="textButton" onClick="checkSequence('log');">
        <script>document.write(userText.showLog);</script>
      </span>
    </div>
    <!-- check multiple -->
    <div id="checkMulti" class="box noDisplay">
      <span class="boxTitle">
        <script>document.write(userText.checkMulti);</script>
      </span>
      <div>
        <script>document.write(userText.chooseFiles);</script>
        <input type=file id=checkMultiFiles multiple onChange="checkMulti();">
      </div>
      <div id="fileDrop" class="fileDrop">
        <div>
          <script>document.write(userText.orFileDrop);</script>
        </div>
      </div>
      <div class="textButton close" onClick="checkMultiDialog();">
        <script>document.write(userText.closeIt);</script>
      </div>
    </div>
    <!-- Settings -->
    <div id="settingsDialog" class="box noDisplay">
        
      <span class="boxTitle">
        <script>document.write(userText.settings);</script>
      </span>
      <div>
        <span>Columns in grid view: </span>
        <span>
          <select id="gridColumns" onChange="selectForm('grid');">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4" selected>4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
          </select>
        </span>
      </div>
      <div class="textButton close" onClick="settingsDialog();">
        <script>document.write(userText.closeIt);</script>
      </div>
    </div>

    <!-- Top block -->
    <div id="topBlock">
      <div id="openAeroLogo">OpenAero</div>
      <!-- Menu -->
      <div id="mainMenu">
        <ul id="menu">
          <!-- File menu -->
          <li onMouseOver="menuActive(this);" onMouseOut="menuInactive(this);">
            <a href='#'>File</a>
            <ul>
              <li class="fileOpening">
                <div class="openSequence">
                  <a href=#>Open sequence</a>
                  <form id="fileForm">
                    <input type=file id=file size=1 onChange="openSequence();">
                  </form>
                </div>
              </li>
              <li><a href="#" onClick="clearSequence();">Clear sequence</a></li>
              <li><a href="#" onClick="saveSequence();">Save sequence</a></li>
              <hr>
              <li><a href="#" onClick="saveAsURL();">Save as link</a></li>
              <li><a href="#" onClick="saveSvg();">Save as image</a></li>
              <li><a href="#" onClick="printDialog(true);">Print/save forms</a></li>
              <hr>
              <li class="fileOpening">
                <a href="#" onClick="checkMultiDialog(true);">Check multiple seq</a>
              </li>
            </ul>
          </li>
          <!-- View menu -->
          <li onMouseOver="menuActive(this);" onMouseOut="menuInactive(this);">
            <a href="#">View</a>
            <ul>
              <li><a href=# onClick="selectForm('A');">Form A</a></li>
              <li><a href=# onClick="selectForm('B');">Form B</a></li>
              <li><a href=# onClick="selectForm('C');">Form C</a></li>
              <li><a href=# onClick="selectForm('grid');">Figs in grid</a></li>
              <hr>
              <li><a href=# id="setMobile" onClick="setMobile(true);">Mobile version</a></li>
            </ul>
          </li>
          <!-- Sequence menu -->
          <li onMouseOver="menuActive(this);" onMouseOut="menuInactive(this);">
            <a href="#">Sequence</a>
            <ul id="sequenceOptions">
              <li class="entryOption"><a href=# onClick="changeEntryDirection('ed');">Downwind entry</a></li>
              <li class="entryOption"><a href=# onClick="changeEntryDirection('ej');">X-box entry</a></li>
              <li class="entryOption"><a href=# onClick="changeEntryDirection('eja');">X-box entry away</a></li>
              <li><a href=# onClick="flipYAxis();">Flip Y-axis</a></li>
              <hr>
              <li><a href=# onClick="clearPositioning();">Clear positioning</a></li>
              <li><a href=# onClick="separateFigures();">Separate figures</a></li>
              <hr>
              <li><a href=# onClick="checkSequence(true);">Check sequence</a></li>
            </ul>
          </li>
          <!-- Queue menu -->
          <li onMouseOver="menuActive(this);" onMouseOut="menuInactive(this);">
            <a href="#">Queue</a>
            <ul id="queueOptions">
              <li><a href=# onClick="showQueue();">Show queue</a></li>
              <li><a href=# onClick="addToQueue();">Add to queue</a></li>
              <li class="fileOpening">
                <div class=openFile>
                  <a href=#>Open queue</a>
                  <form id="queueForm">
                    <input type=file id=queue size=1 onChange="openQueue();">
                  </form>
                <div>
              </li>
              <li><a href="#" onClick="saveQueue();">Save queue</a></li>
            </ul>          
          </li>
          <!-- Demo menu -->
          <li onMouseOver="menuActive(this);" onMouseOut="menuInactive(this);">
            <a href="#">Demo</a>
            <ul id="exampleSequences">
            </ul>
          </li>
          <!-- Tools menu -->
          <li onMouseOver="menuActive(this);" onMouseOut="menuInactive(this);">
            <a href="#">Tools</a>
            <ul>
              <li><a href="#" onClick="settingsDialog(true);">Settings</a></li>
            </ul>
          </li>
          <!-- Help menu -->
          <li onMouseOver="menuActive(this);" onMouseOut="menuInactive(this);">
            <a href="#">Help</a>
            <ul>
              <li><a href=# onClick="window.open('manual.html', 'OpenAero manual', 'menubar=no, scrollbars=yes, status=no, toolbar=no, top=30px, width=900px');">Manual</a></li>
              <li><a href=# onClick="window.open('language.html', 'OpenAero language', 'menubar=no, scrollbars=yes, status=no, toolbar=no, top=30px, width=900px');">OpenAero language</a></li>
              <li><a href="http://code.google.com/p/open-aero/wiki/Installation" target="_blank">Installation</a></li>
              <li><a href=# onClick="window.open('arestisystem.html', 'The Aresti aerocryptographic system', 'menubar=no, scrollbars=yes, status=no, toolbar=no, top=30px, width=900px');">Aresti system</a></li>
              <li><a href=# onClick="window.open('about.html', 'About', 'menubar=no, scrollbars=yes, status=no, toolbar=no, top=30px, width=900px');">About</a></li>
            </ul>
          </li>
        </ul>
        <!-- Current version -->
        <div class="version">
          <a href="http://code.google.com/p/open-aero/downloads/list?can=3" target="_blank"><img id="latestVersion" src=""></img></a>
          <span id=version>Version: <script>document.write(version);</script></span>
        </div>
      </div>
      <!-- undo/redo buttons -->
      <div id="undoRedo">
        <div id="undo" class="undoRedoButton" onClick="clickButton(this);"><div><img src="buttons/smallMask.png"></div></div>
        <div id="redo" class="undoRedoButton clearLeft" onClick="clickButton(this);"><div><img src="buttons/smallMask.png"></div></div>
      </div>
      <!-- Sequence text -->
      <div id="sequenceTextContainer">
        <div id="sequenceTextClone"></div>
        <textarea id="sequence_text" rows="2" wrap="virtual" onInput="checkSequenceChanged();" onKeyUp="checkSequenceChanged();" onMouseUp="checkSequenceChanged();" onFocus="this.hasfocus = true;" onBlur="this.hasfocus = false;" onPaste="OLANBumpBugCheck=true;"></textarea>
      </div>
    </div>
    <!-- main sequence area -->
    <div id="main">
      <!-- Left main block -->
      <div id="leftBlock">
        <div class="tabSelector">
          <ul>
            <li id=tab-sequenceInfo class=activeTab><a href="#" onClick="selectTab(this);">Sequence&nbsp;info</a></li>
            <li id=tab-figureInfo class=inactiveTab><a href="#" onClick="selectTab(this);">Figure&nbsp;editor</a></li>
            <li id=tab-svgContainer class=inactiveTab style="display:none;"><a href="#" onClick="selectTab(this);">Sequence</a></li>
          </ul>
        </div>
        <div class=clearBoth></div>
        <!-- Sequence info -->
        <div id="sequenceInfo" class="section">
          <!-- logo chooser -->
          <div id="logoChooserContainer">
            <div>
              <a href="#" onMouseDown="hideLogoChooser();">
                <img src="buttons/close.png">
              </a>
            </div>
            <div id="uploadLogo" class="fileOpening">
              <script>document.write(userText.logoExplain);</script>
              <input type="file" id="logoFile" accept="image/*"
                onChange="hideLogoChooser(); openFile(document.getElementById('logoFile').files[0], 'Logo')">
            </div>
            <div id="chooseLogo"></div>
          </div>
          <div class=item><div class="label">Pilot</div><input type=text name=pilot id=pilot maxlength="30" onChange="changeSequenceInfo()"></div>
          <div class=item><div class="label">Aircraft</div><input type=text name=aircraft id=aircraft maxlength="30" onChange="changeSequenceInfo()"></div>
          <div class=item><div class="label">Location</div><input type=text name=location id=location maxlength="30" onChange="changeSequenceInfo()"></div>
          <div class=item><div class="label">Date</div><input type=text name=date id=date maxlength="30" onChange="changeSequenceInfo()"></div>
          <div class=item><div class="label">Class</div>
            <select name="class" id="class" onChange="selectPwrdGlider();">
              <option value="powered">Powered</option>
              <option value="glider">Glider</option>
            </select>
          </div>
          <div class="item combo"><div class="label">Rules</div><input type=text name=rules id=rules maxlength="30"><ul id=rulesList></ul></div>
          <div class="item combo"><div class="label">Category</div><input type=text name=category id=category maxlength="30"><ul id=categoryList></ul></div>
          <div class="item combo"><div class="label">Program</div><input type=text name=program id=program maxlength="30"><ul id=programList></ul></div>
          <div class=item><div class="label">Positioning</div><input type=text name=positioning id=positioning maxlength="4" onChange="changeSequenceInfo()"></div>
          <div id="harmonyField" class=item style="opacity:0;"><div class="label">Harmony</div><input type=text name=harmony id=harmony maxlength="4" onChange="changeSequenceInfo()"></div>
          <div class="clearBoth"></div>
          <div class=item><div class="label">Logo<div id=removeLogo></div><input type=hidden id=logo></div><div id="activeLogo"><a href="#" onClick="logoChooser()">Choose logo</a></div></div>
          <div class="clearSpace"></div>
          <div class=item><div class="label">Notes</div><textarea name=notes id=notes onChange="changeSequenceInfo()"></textarea></div>
          <input type=hidden id="oa_version">
        </div>
        <!-- Figure Chooser -->
        <div id="figureInfo" class=section style="position:absolute;z-index:-1;top:-5000px;">
          <div id="figureHeader" class="sectionLabel"></div><div class="sectionLabelClose">&nbsp;</div>
          <div id="selectedFigure">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" id="selectedFigureSvg"></svg>
            <div id="addFigureText" onMouseDown="showFigureSelector();"><div>Click to add figure</div></div>
          </div>
          <div id="figureOptions">
            <div>
              <div id="subSequence" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div id="deleteFig" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div class=clearSpace></div>
            </div>
            <div>
              <div id="switchFirstRoll" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div id="switchY" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div id="switchX" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div class=clearSpace></div>
            </div>
            <div>
              <div id="magMin" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <input type=text size=2 name=scale id=scale value="0" onKeyUp="updateFigure();">
              <div id="magPlus" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div class=clearSpace></div>
            </div>
            <div>
              <div id="moveForward" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div id="straightLine" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>     
              <div id="curvedLine" class="button" onClick="clickButton(this);"><img src="buttons/mask.png"></div>
              <div class=clearBoth></div>
              <input type=text size=2 name=moveX id=moveX disabled="disabled" onChange="updateFigure();">
              <input type=text size=2 name=moveY id=moveY disabled="disabled" onChange="updateFigure();">
              <div class=clearSpace></div>
            </div>
          </div>
          <div id="unknownFigureChooser">
            <select id="unknownFigure" onChange="updateFigure();">
              <option value="0">No Free Unkn. Fig</option>
              <option value="L">Free Unknown Link</option>
              <option value="A">Free Unknown Fig A</option>
              <option value="B">Free Unknown Fig B</option>
              <option value="C">Free Unknown Fig C</option>
              <option value="D">Free Unknown Fig D</option>
              <option value="E">Free Unknown Fig E</option>
              <option value="F">Free Unknown Fig F</option>
              <option value="G">Free Unknown Fig G</option>
              <option value="H">Free Unknown Fig H</option>
              <option value="I">Free Unknown Fig I</option>
              <option value="J">Free Unknown Fig J</option>
            </select>
          </div>

          <div class="clearBoth"></div>
          <div id="entryExitExtension" class="section">
            <div class="sectionLabel">Entry/exit extension</div><div class="sectionLabelClose">&nbsp;</div>
            <span><img src="images/ee_ext-entry.png"></span>
            <span id="entryExt" class="plusMin"></span>
            <span><img src="images/ee_ext-figure.png"></span>
            <span id="exitExt" class="plusMin"></span>
            <span><img src="images/ee_ext-exit.png"></span>
          </div>
          <div id="rollInfo"></div>
        </div>
        <!-- Alerts -->
        <div id=alerts class=section>
          <div class="sectionLabel">Alerts</div><div class="sectionLabelClose">&nbsp;</div>
        </div>
        <div class="clearBoth"></div>
        <div id="design"><span>Software & design by Ringo Massa</span></div>
      </div>
      <!-- Container for the sequence svg -->
      <div id="svgContainer">
      </div>
      <!-- Figure selector -->
      <div id="figureSelector">
        <div>
          <div id="figureSelectorClose"><a href="#" onMouseDown="hideFigureSelector();"><img src="buttons/close.png"></a></div>
          <div id="figureSelectorOptionsDiv"></div>
          <div id="figureSelectorGroupDiv"><select id="figureGroup" onChange="changeFigureGroup(this);"></select></div>
        </div>
        <div id="figureChooser">
        <table id="figureChooserTable"></table>
        </div>
      </div>
    </div>
    <!-- Container for SVGs for the figure chooser -->
    <div id="figureSvgContainer">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" id="figureChooserSvg"></svg>
    </div>
    <!-- Hidden div used for saving files through openaero.php -->
    <div id="saveFileFormDiv">
      <form action="openaero.php" method="post" id="saveFileForm">
        <input type="hidden" name="f" value="download" />
        <input type="hidden" name="name" />
        <input type="hidden" name="data" />
        <input type="hidden" name="format" />
      </form>
    </div>
  </body>
  <!-- The main script. Put it at the end when everything else is loaded --> 
  <script src="OpenAero.js" type="text/javascript"></script>
</html>
